<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>有奖答题平台</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="/mobile/css/bui.css" />
    <link rel="stylesheet" href="/lib/mobile/css/common.css"/>
    <link rel="stylesheet" href="/lib/mobile/css/rank.css"/>

</head>
<body>
    <ul class="rank_tabs">
        <li id="rank_person"><a href="javascript:void(0)">个人排行榜</a></li>
        <li class="on"  id="rank_company"><a href="javascript:void(0)">单位排行榜</a></li>
    </ul>
    <div class="rank_list">
        <dl>
            <!--<dd class="on"><span>2021年2月</span><i></i></dd>-->
            <!--<dd><span>2021年度</span><i></i></dd>-->
            <dd class="on" id="monthon"><span><input type="text" id="month" style="width: 80px" readonly class="bui-input"></span><i></i></dd>
            <dd id="yearon"><span><input type="text" id="year" style="width: 50px" readonly class="bui-input"></span><i></i></dd>
        </dl>
        <ul id="headColumn">
            <!--<li><s class="first icon"></s><p><img src="img/uhead.png" alt="" /><span>黄舒骏(lv.5)</span></p><u>888 积分</u></li>-->
        </ul>
    </div>
    <!-- 依赖库 手机调试的js引用顺序如下 -->
    <script src="/lib/mobile/js/zepto.js"></script>
    <script src="/lib/mobile/js/plugins/fastclick.js"></script>
    <script src="/lib/mobile/js/bui.js"></script>
    <script src="/lib/mobile/js/common.js?111    "></script>
    <script>
        bui.ready(function () {
            // 这里写业务及控件初始化
            var storage = bui.storage();
            dateSelect();
            root();
            changeDateStyle();
            bui.btn({id: ".bui-page", handle: ".bui-btn"}).load();
            myDeptPoint('',$("#month").val(),"month");
            var pageview = {};
            pageview.init = function () {
                // 验证码示例
                var uid=storage.get("uid");
                //我的积分
                // getMyponit(uid[0]);
            }
            pageview.init();
        })
        function myDeptPoint(uid,ny,flag) {
            //执行登录操作
            var loginAjax = bui.ajax({
                url: BASE_URL+"mobile/myDeptPoint",
                // 可选参数
                data: {
                    uid:uid,
                    ny:ny,
                    flag:flag
                },
                method: "POST"
            });
            loginAjax.then(function(res) {
                if(res.code == 0){
                    var user = res.data;
                    // $("#headColumn").html("<tr >\n" +
                    //     "                <th>序号</th>\n" +
                    //     "                <th>单位</th>\n" +
                    //     "                <th>平均积分</th>\n" +
                    //     "                <th>参与比例</th>\n" +
                    //     "            </tr>");
                    $("#headColumn").html('');
                    var html=''
                    for(var i=0;i<user.length;i++){
                        if(typeof (user[i].name)=='undefined'){
                            html=html+"<li></li>";
                            continue;
                        }
                        if(i==0){
                            html=html+"<li><s class=\"first icon\"></s><p><span>"+user[i].name+"</span><span style='margin-left: 80px'>"+user[i].avgpoint+"积分</span></p> <ul>"+user[i].dtrate+"%</ul></li>"
                        }else if(i==1){
                            // html=html+"<li><s class=\"two icon\"></s><p><span>"+user[i].name+"</span></p><u>"+user[i].avgpoint+"积分 &nbsp;&nbsp;"+user[i].dtrate+"%</u></li>"
                            html=html+"<li><s class=\"two icon\"></s><p><span>"+user[i].name+"</span><span style='margin-left: 80px'>"+user[i].avgpoint+"积分</span></p> <ul>"+user[i].dtrate+"%</ul></li>"
                        }else if(i==2){
                            html=html+"<li><s class=\"three icon\"></s><p><span>"+user[i].name+"</span><span style='margin-left: 80px'>"+user[i].avgpoint+"积分</span></p> <ul>"+user[i].dtrate+"%</ul></li>"
                        }else if(i>=3){
                            html=html+"<li><s class=\"lv. "+(i+1)+"\"></s><p><span>"+user[i].name+"</span><span style='margin-left: 80px'>"+user[i].avgpoint+"积分</span></p> <ul>"+user[i].dtrate+"%</ul></li>"
                            // html=html+"<li><s class=\"lv."+(i+1)+"\"></s><p><span>"+user[i].name+"</span></p><u>"+user[i].avgpoint+"积分 &nbsp;&nbsp;"+user[i].dtrate+"%</u></li>"
                        }
                    }
                    if(user.length==0){
                        html=' <li></li>'
                    }
                    $("#headColumn").html(html);
                }else{
                    bui.alert(res.msg);
                }
            },function(res) {
                bui.alert("请求异常");
            })
        }
        function dateSelect() {
            var uiPickerdate = bui.pickerdate({
                handle: "#month",
                bindValue: true, // 1.5.3 新增, 修改的值会自动绑定到 handle, 不再需要自己去绑定
                // input 显示的日期格式
                formatValue: "yyyyMM",
                onChange: function(value) {
                },
                callback: function(e) {
                    $("#monthon").addClass("on");
                    $("#yearon").removeClass("on");
                    myDeptPoint('',this.value(),'month');
                },
                // 如果不需要按钮,设置为空
                // buttons: [{name:"取消"}]
            });
            uiPickerdate.cols({
                date: "none",
                hour: "none",
                minute: "none",
                second: "none"
            })
            var year = bui.pickerdate({
                handle: "#year",
                bindValue: true, // 1.5.3 新增, 修改的值会自动绑定到 handle, 不再需要自己去绑定
                // input 显示的日期格式
                formatValue: "yyyy",
                onChange: function(value) {
                },
                callback: function(e) {
                    $("#monthon").removeClass("on");
                    $("#yearon").addClass("on");
                    myDeptPoint('',this.value(),'year');
                },
                // 如果不需要按钮,设置为空
                // buttons: [{name:"取消"}]
            });
            year.cols({
                month: "none",
                date: "none",
                hour: "none",
                minute: "none",
                second: "none"
            })
        }
        function changeDateStyle() {
            $(".rank_list dd.on span").click(function () {
                $(this).removeClass('on');
            });
            $(".rank_list dd span").click(function () {
                $(this).addClass('on');
            });
        }
        function root() {
            $("#rank_person").on("click", function (argument) {
                $("#rank_person").addClass("on");
                $("#rank_company").removeClass("on");
                bui.load({ url: BASE_URL+"mobile/rank_person"});
            });
            $("#rank_company").on("click", function (argument) {
                $("#rank_company").addClass("on");
                $("#rank_person").removeClass("on");
                bui.load({ url: BASE_URL+"mobile/rank_company"});
            });
        }
    </script>
</body>
</html>